<template>
	<div>
    <div class="container">
	  <div class="left">
		<div class="show">
		  <img :src="selectedImg" alt="show" />
		</div>
    <br>
		<div class="choose">
		  <img v-for="cat in catImages" :key="cat" :src="cat" :alt="cat" @click="selectImg(cat)" />
		</div>
	  </div>
	  <div class="right">
		<div class="info">
      <br>
		  <div>
			<label>我的名字：</label>{{ nickname }}
		  </div>
      <br>
		  <div>
			<label>年龄：</label>{{ age }}
		  </div>
		  <br>
      <div>
			<label>性别：</label>{{ sex == 0 ? '雌' : '雄' }}
		  </div>
		  <br>
		  <div>
			<label>品种：</label>{{ variety }}
		  </div>
		  <br>
      <button style="margin-bottom: 30px;margin-left: 5%" class="adopt" @click="showAdoptionForm = true" :disabled="isUpvote">{{ isUpvote ? '已领养' : '我要领养' }}</button>
      <br>
    </div>
		</div>
		<br>
	</div>
	<div style="margin: auto;">
      <el-dialog v-model="showAdoptionForm" title="" width="500" style="text-align: center;">
        <h2 >领养中心</h2><br>
        <el-form :model="form">
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="电话" :label-width="formLabelWidth">
            <el-input v-model="form.phone" autocomplete="off" />
          </el-form-item>
          <el-form-item label="想说的话" :label-width="formLabelWidth">
            <el-input
              v-model="form.message"
              :autosize="{ minRows: 2, maxRows: 4 }"
              type="textarea"
              placeholder="请描述一下"
            />
          </el-form-item>
          <el-checkbox v-model="confirmCheckbox" style="display: inline-block; margin-left: 10px;" disabled>
            <el-button plain @click="open">我已阅读该内容</el-button>
          </el-checkbox>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button>
              清除
            </el-button>
            <el-button type="primary" @click="handleSubmit">
              提交
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
    <div class="bottom">
      <h3 class="ti">详细内容</h3>
      <hr class="dashed2">
      <div class="ti2">{{ message }}</div>
    </div>
  </div>
  </template>
  
<script setup>
import {ref,reactive,onMounted} from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import{useRoute} from 'vue-router'
import { ElMessageBox } from 'element-plus'
let route =useRoute()
let selectedImg = ref('')
let catImages = ref([])
let nickname = ref('')
let age = ref('')
let variety = ref('')
let showAdoptionForm = ref(false)
let isUpvote = ref(false)
let message = ref('')
let sex = ref('')
let form = reactive({
  name: "",
  phone: "",
  message: "",
})
let captchaImg = ref('')
let animal = ref({})
let confirmCheckbox = ref(false)
let id = ref('')
const open = () => {
  ElMessageBox.alert(
    `
    <div>
      <p>1、领养人必须年满21岁，有稳定的住所、工作及较好的经济收入。</p>
      <p>2、不接受异地领养，只接受深圳市领养，便于联系和回访。</p>
      <p>3、领养时需提供身份证原件与复印件、电话号码、微信号和详细的家庭住址。</p>
      <p>4、需缴纳领养押金（小型犬RMB300元/只，大型犬RMB500元/只，猫咪RMB100元/只)，由领养之家开具收据，并请妥善保管好此收据。如领养半年后宠物健康的被带回领养之家体检合格，需凭此收据退还押金；如果半年内宠物丢失或死亡，我们将不退还押金。</p>
      <p>5、领养之家所有适龄宠物均已绝育并接种疫苗，对于领养还没有做绝育的小动物，我们将另加收绝育保证金350元/只，并开具收据，小动物年满六个月后，领养之家将给于免费绝育，收回收据后全数退回绝育保证金，绝育康复后再自行带回。(原则上我们不建议领养未做绝育的宠物，未绝育母猫母狗不能领养。）</p>
      <p>6、为防止宠物发生坠楼、跑丢等意外情况，在领养前请自觉接受工作人员对领养家庭窗户、阳台或入户花园的安全检查，对于有安全隐患的地方需用网格封起来。没有安全隐患后方可领养。</p>
      <p>7、领养时我们需要亲自将宠物送往领养家庭。领养人应加入我们领养人的微信群（方便相互及时沟通了解宠物近况、身体情况等）。领养人要不定期的发被领养宠物的照片或视频到群里。如果长时间领养人没有发宠物近况，我们会主动与之联系，有可能需要上门回访。如发现领养人对宠物有不负责、照顾不周的情况我们有权接回宠物。</p>
      <p>8、如遇领养人搬家（包括离开深圳去其他城市、回老家）搬家后的新地址及联系方式需要告诉我们以便及时更新。搬家前需要先做好新住址的窗户阳台等安全措施，并同意接受我们的回访。</p>
      <p>9、领养后发现生病需及时带到附近宠物医院或到与我们合作的宠物医院进行及时治疗，也可求助于我们领养之家，切勿将其遗弃再次流浪街头。</p>
      <p>10、领养后为了您和家人及宠物的健康，请每年定期将其带到宠物医院或领养之家，我们将免费为其注射疫苗。</p>
      <p>注：如遇宠物遗失、跑丢等情况，请第一时间与我们联系（以免耽误找寻的最佳时间）。依据我们的经验，大部分宠物能及时找回，我们都不希望它们再次成为流浪动物。</p>
    </div>
    `,
    {
      dangerouslyUseHTMLString: true,
      center: true,
      title: '领养协议'
    }
  )
  confirmCheckbox.value = true
}
function selectImg(imgSrc) {
  selectedImg.value = imgSrc;
}
function cancelForm() {
	showAdoptionForm.value = false;
}
function handleSubmit(){
  if(!confirmCheckbox.value){
    ElMessage({
      message:'请确认之后再提交',
      type:'warning',
      duration: 1000,
      center: true,
    });
    return;
  }
  else if(!(form.name && form.phone && form.message)){
    ElMessage({
      message:'请完善信息再提交',
      type:'warning',
      duration: 1000,
      center: true,
    });
    return;
  }
  else{
    let data = axios.get(`http://124.223.224.5:8080/isAdopt?id=${id.value}`)
    if(data){
      ElMessage({
        message:'提交成功',
        type: 'success',
        center: true,
        duration: 1000
      })
      setTimeout(() => {
        showAdoptionForm.value = false
        clear()
        getMessage()
      },1000)
    }   
    else{
      ElMessage({
        message:'提交失败',
        type: 'error',
        center: true,
        duration: 1000
      })
    }
  } 
}
function getId(){
  id.value = route.params.id
}
async function getMessage(){
  const {data} = await axios.get(`http://124.223.224.5:8080/loadAnimal?id=${id.value}`)
  catImages.value = data.data.animalUrl
  selectedImg.value = data.data.animalUrl[0]
  nickname.value = data.data.animalName
  age.value = data.data.age
  variety.value = data.data.species
  isUpvote.value = data.data.isAdopt
  message.value = data.data.introduce
  sex.value = data.data.sex
}
function clear(){
  form.name = ''
  form.code = ''
  form.message = ''
  form.phone = ''
  confirmCheckbox.value = false
}
onMounted(() => {
  getId()
  getMessage()
})
  </script>
  <style scoped>
  .container {
	display: flex;
  }
  
  .left {
	flex: 40%;
  margin-left: 15%;
  }
  
  .right {
	flex: 40%;
  }
  .bottom{
    margin-top: 30px;
  }
  
  .show img {
	width: 100%;
  }
  .choose {
  display: flex;
  justify-content: space-between;
}
  
  .choose img {
	width: 30%;
  }
  .info{
    margin-left: 20%;
    margin-top: 25px;
    width: 50%;
    background-color: #fff;
    text-align: center;
    border-radius: 10px
}
hr.dashed {
  border-top: dashed 2px #cccccc; /* 虚线样式：线条宽度、线条颜色 */
}
.dashed2{
  border-top: dashed 5px #d0e8ec; /* 虚线样式：线条宽度、线条颜色 */
}
button.adopt{
	border-radius: 30px 30px;
    background-color: rgb(40, 196, 204);
    height:40px;
    width:120px;
	margin-left:25%;
}
.adopter{
	position: absolute;
	border-radius: 30px 30px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: rgb(142, 232, 232,0.75);
	padding: 20px;
	z-index: 999;
	width:60%;
	height:500px;
}
label {
    font-size: 20px; /* 设置 Label 的字体大小为 20px */
}

input, select {
    font-size: 15px; /* 设置输入框和下拉框的字体大小为 18px */
}
button.submit, button.cancel{
	background-color: blanchedalmond;
	border-radius: 30px 30px;
	height:50px;
	width:30%;
	margin-left: 40%;
}
.ti{
  margin-left: 15%;
  font-size:30px;
  font-family: 'YourDesiredFont', cursive; /* 设置花样字体，替换 'YourDesiredFont' 为实际使用的花样字体 */  
}
.ti2{
  margin-left: 15%;
}
h2{
  font-size: 20px;
  font-weight: bold;
}
  </style>